<template>
	<div class="evaluate-operation">
		<div class="classIndex_h">

		    <!-- <router-link :to="{path: '/class/quality/students', query: {id: path}}">综合素质评价</router-link> -->
		    <a @click="goBack">综合素质评价</a>
		    <strong><i>></i>评价{{userName}}</strong>
		</div>
		
		<div class="evaluate-table" v-loading="loading"
		element-loading-text="拼命加载中">
			<table>
				<thead>
				   <tr>
				     <th>一级指标</th>
				     <th>二级指标</th>
				     <th>指标定义</th>
				      <th>指标综合分</th>
				   </tr>
				 </thead>
				 <tbody>
				 	<template  v-for="(item, index) of evaluateList"> 

				 		<template>
				 			<tr v-for="(child, key) of item.children">
				 			 	<td  width="100px" align="center" v-if="key == 0" :rowspan="item.children.length"><div class="ev-cell">{{item.title}}</div></td>
				 			 	<td  width="100px"  align="center"><div class="ev-cell">{{child.title}}</div></td>
				 			  	<td><div class="ev-cell">{{child.content}}</div></td>
				 			  	<td  width="65px"  align="center"><div class="ev-cell">
				 			  		
				 			  		<span  v-if='child.get_score '>{{child.get_score}}</span>

				 			  		<el-input maxlength="3" @change="setnumber($event, child,child.score)" v-else type="number" :min="0" :max="child.score" v-model="child.number" placeholder="请输入内容"></el-input>
				 			  	</div></td>
				 			</tr>
				 		</template>
				 		
				 	</template>
				 	
				 </tbody>
			</table>
		</div>

		<div class="evaluate-comment" v-if="state == 0">
			<h3>评语</h3>
			<div class="evaluate-txt">
				<el-input
				  type="textarea"
				  :rows="6" resize="none"
				  placeholder="请输入评语"
				  v-model="comment"
				  maxlength="300">
				</el-input>
				<span><i>{{comment.length}}</i>/300</span>
			</div>
			<div  class="evaluate-btn">
				<el-button type="primary" @click="scoreQuality" v-preventReClick>提交评分</el-button>
			</div>
		</div>

		<div class="self-evaluate evaluate-commentList" v-if="state == 1">
			<!-- <div class="quality-title"><i class="iq q-11"></i><span>评语</span></div> -->
			
		<!-- 	<div class="self-evaluate evaluate-commentList"  v-if="commentList.me.length != 0">
			<div class="quality-title"><i class="iq q-11"></i><span>自我评价</span></div>
			<div class="self-user" v-for="(item, index) of commentList.me">
				<div>
					<span>
						<img :src="BASE_URL + item.avatar_path">
					</span>
					<p>{{item.name}}</p>
				</div>
				<p v-html="item.comment"></p>
			</div>
		</div> -->
			
		<!-- 	<div class="self-evaluate evaluate-commentList"  v-if="commentList.teacher.length != 0">
			<div class="quality-title"><i class="iq q-11"></i><span>教师评语</span></div>
			<div class="self-user" v-for="(item, index) of commentList.teacher">
				<div>
					<span>
						<img :src="BASE_URL + item.avatar_path">
					</span>
					<p>{{item.name}}</p>
				</div>
				<p v-html="item.comment"></p>
			</div>
		</div> -->

			<div class="self-evaluate evaluate-commentList" v-if="commentList.student.length != 0">
				<div class="quality-title"><i class="iq q-11"></i><span>评语</span></div>
				<!-- <div class="quality-title"><i class="iq q-11"></i><span>同学评语</span></div> -->
				<div class="self-user" v-for="(item, index) of commentList.student">
					<div>
						<span>
							<img :src="BASE_URL + item.avatar_path">
						</span>
						<p>{{item.name}}</p>
					</div>
					<p v-html="item.comment"></p>
				</div>
			</div>

			<div class="self-evaluate evaluate-commentList" v-if="commentList.teacher.length != 0">
				<div class="quality-title"><i class="iq q-11"></i><span>评语</span></div>
				<!-- <div class="quality-title"><i class="iq q-11"></i><span>同学评语</span></div> -->
				<div class="self-user" v-for="(item, index) of commentList.teacher">
					<div>
						<span>
							<img :src="BASE_URL + item.avatar_path">
						</span>
						<p>{{item.name}}</p>
					</div>
					<p v-html="item.comment"></p>
				</div>
			</div>

		</div>

	</div>
</template>

<script>
	
	export default{
		data(){
			return {
				loading: true,
				path: this.$route.query.id,
				state: this.$route.query.state,
				userName: this.$route.query.name,
				comment: "",
				evaluateList: [],
				state: this.$route.query.state,
				commentList: {
					teacher: [],
					student: [],
					me: [],
				},
			}
		},
		watch: {
			'$store.state.changData': {
				handler(val, newval){
					this.path = sessionStorage.getItem('classId')
					this.evaluatingIndicator()
				},
				immediate: true
			}
		},
		methods: {
			/**
			 * 对输入框限制内容
			 * @qiu_m
			 * @DateTime 2019-11-21T16:03:03+0800
			 * @param    {[type]}                 val [description]
			 * @param    {[type]}                 max [description]
			 * @return   {[type]}                     [description]
			 */
			setnumber(val, obj, max){
				let num =  /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g
				if (!num.test(val)) {

					obj.number = 0
				}else if (val > max) {
					obj.number = max
	
				}else{
	
					return obj.number = parseInt(obj.number)
				}

				

			},
			getComment(){
				let success = (res=>{
					this.commentList.teacher = res.data.teacher
					this.commentList.student = res.data.student
					this.commentList.me = res.data.me
				});

				let params = {
					term_id: sessionStorage.getItem('termid') ? sessionStorage.getItem('termid') : '',
					class_id: this.path,
					user_id: this.$route.query.uid
				};

				this.$ajax({
					url: 'api/quality/get_other_comment',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},
			/*对某用户的某次素质评价评分*/
			scoreQuality(){

				let qualityList = [];
				for (let i = 0; i < this.evaluateList.length; i++) {
					for (let j = 0; j < this.evaluateList[i].children.length; j++) {
						if (this.evaluateList[i].children[j].number == '') {
							return this.$message.error(`请填写${this.evaluateList[i].children[j].title}指标综合分`)
						}
						qualityList.push({
							quality_index_id: this.evaluateList[i].children[j].id,
							score: this.evaluateList[i].children[j].number
						})
					}
				}
				if (is_empty(this.comment)) {
					return this.$message.error('请输入评语')
				}
				let success = (res=>{
					this.$message.success(res.msg);
					
					let query = deep_clone(this.$route.query);
					Object.assign(query, {state: 1})
					this.$router.push({ path : this.$route.path, query : query });
					this.state = 1 
					this.evaluatingIndicator()

				})



				let params = {
					term_id: this.$route.query.tid,/*学期id*/
					user_id: this.$route.query.uid,/*被评价的用户id*/
					class_id: this.path ,/*被评价用户的班级id*/
					teacher_or_student_or_me: this.$route.query.relo,/*1代表是教师在评分 2代表是学生在评分 3代表是自己在评分*/
					comment: this.comment,/*评语*/
					quality_index_list: qualityList,
					
				};

				this.$ajax.post('api/quality/score_quality',params,{ func: {success: success}})
			},
			/*获取素质评价指标*/
			evaluatingIndicator(){
				let success=  (res=>{
					this.evaluateList = res.data;

					if (this.state == 1) {
						this.getComment()
					}else{
						for (let i = 0; i < this.evaluateList.length; i++) {
							for (let j = 0; j < this.evaluateList[i].children.length; j++) {
								this.$set(this.evaluateList[i].children[j], 'number', '')
							}
						}
					}
					
					
					this.loading = false;
				})



				let params = {
					term_id: sessionStorage.getItem('termid') ? sessionStorage.getItem('termid') : '',
					user_id: this.$route.query.uid,
					class_id: this.path
					// status: 1, /* 1正常 0已被隐藏的*/
				}

				this.$ajax({
					url: 'api/quality/score_quality',
					method: 'get',
					params: params,
					func: {success: success}
				})
			},
			goBack(){

				if (this.$route.name == 'operation') {
					this.$router.push({path: '/class/quality/students', query: {id: this.path}})
				}else{
					this.$router.back(-1)
				}
				
			}
		}
	}
</script>